<template>
    <div class="history">
        <div>
            <button class="btn_anniu newStyle">报警记录</button>
        </div>
        <div>
            <!-- 报警记录表格 -->
            <table class="call-police-bg">
                <thead>
                    <tr class="header-row text-color">
                        <th v-for="item in titlePolice" :key="item">{{ item }}</th>
                    </tr>
                </thead>
                <tbody class="tbody_history">
                    <tr v-for="item in getwarningData" :key="item.id"
                        :class="['fixed-height-row', { 'odd-row-history': item.id % 2 === 1, 'header-row-history': item.id % 2 === 0 }]">
                        <td class="line-spacing">{{ item.id }}</td>
                        <td class="line-spacing">{{ item.time }}</td>
                        <td class="line-spacing">{{ item.deviceName }}</td>
                        <td class="line-spacing">{{item.warnContext}}</td>
                    </tr>
                </tbody>
            </table>
            <!-- 分页控件 -->
            <div class="pagination">
                <button class="up" @click="previousPage_warn" :disabled="currentPage_warn === 1">上一页</button>
                <button class="down" @click="nextPage_warn" :disabled="currentPage_warn >= totalPages_warn">下一页</button>
                <span class="now">当前页: {{ currentPage_warn }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import request from '../../api/request';

// 报警记录分页相关
const currentPage_warn = ref(1);  // 当前页数
const totalPages_warn = ref(20);  // 总页数
const getwarningData = ref([]);   // 报警记录数据
const titlePolice = ['序号', '时间', '设备', '内容']; // 表头

// 请求报警记录数据
function requestData_warning(page_warning, warning_list) {
    request.listOperation({ systemId: page_warning, page: warning_list }).then(res => {
        getwarningData.value = res.data;
    });
}

// 初始化加载数据
onMounted(() => {
    requestData_warning(5, currentPage_warn.value);
});

// 下一页
const nextPage_warn = () => {
    if (currentPage_warn.value < totalPages_warn.value) {
        currentPage_warn.value++;
        requestData_warning(5, currentPage_warn.value);
    }
};

// 上一页
const previousPage_warn = () => {
    if (currentPage_warn.value > 1) {
        currentPage_warn.value--;
        requestData_warning(5, currentPage_warn.value);
    }
};
</script>

<style lang="scss">
.history {
    background-size: 85% 90%;
    background-repeat: no-repeat;
    position: fixed;
    left: 5.6%;
    top: 4%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;

    .btn_anniu {
        position: relative;
        right: 36.7vw;
        width: 10%;
        padding: 10px 0;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        border: 0 solid #fff;
        color: #000;
        outline: none;
        background: #fff;
        box-sizing: border-box;
        outline: none;
    }

    .newStyle {
        border-bottom: 2px solid #f0892e;
        color: #f0892e;
        font-size: 16px;
        font-weight: bold;
    }

    .call-police-bg {
        width: 94vw;
        height: 88vh;
        margin-left: 3.1%;
        background-color: #ffffff;

        th {
            height: 3.8vh;
            width: 200px;
            padding: 0 10px;
            text-align: center;
        }

        td {
            height: 3.8vh;
            width: 200px;
            padding: 0 10px;
            text-align: center;
            color: #000000;
        }

        .up {
            width: 80px;
            height: 38px;
            font-size: 18px;
            background-color: white;
            color: #000;
        }

        .now {
            width: 80px;
            height: 38px;
            font-size: 18px;
            background-color: white;
            color: #000;
        }

        .down {
            width: 80px;
            height: 38px;
            font-size: 18px;
            background-color: white;
            color: #000;
        }
    }

    .header-row {
        display: flex;
        background-color: rgb(197, 205, 190);
        height: 3.8vh;
        font-size: 1.5vh;
        text-align: center;
    }

    .text-color {
        color: rgb(255, 255, 255);
        text-align: center;
        line-height: 3.8vh;
    }

    .odd-row-history {
        display: flex;
        background-color: rgb(215, 240, 250);
        height: 3.805vh;
        font-size: 1.5vh;
    }

    .header-row-history {
        display: flex;
        background-color: rgb(246, 237, 221);
        height: 3.805vh;
        font-size: 1.5vh;
        text-align: center;
    }

    .line-spacing {
        height: 3.8vh;
        width: 15.835vw;
    }
}
</style>